<template>
  <main-layout>
    <div class="content">
      <!-- home -->
      <div class="title">
        <div class="search">
          <span  @click="toUrl('UserInfo')">
            <img class="user-icon" :src="userInfo.headIcon||'../../assets/home/wode.png'" alt/>
          </span>
          <span class="search-input">
            <img src="../../assets/home/sousuo_icon.png" alt />
            <input type="text" />
          </span>
          <span>
            <img src="../../assets/home/saoyisao_icon.png" alt />
          </span>
        </div>
        <div id="flag1">
          <div class="flag1">0.0044</div>
          <div>GXC</div>
        </div>
        <div id="flag2">
          <div class="flag2">0.0044</div>
          <div>GXC</div>
        </div>
        <div id="flag3">
          <div class="flag3">0.0044</div>
          <div>GXC</div>
        </div>
        <div id="flag4">
          <div class="flag4">0.0044</div>
          <div>GXC</div>
        </div>
        <div id="flag5">
          <div class="flag5"></div>
          <div>开心夺宝</div>
        </div>
        <div id="flag6">
          <div class="flag6"></div>
          <div>算力21</div>
        </div>
      </div>

      <!--精选理财-->
      <div class="money">
        <h4>精选理财</h4>
        <div class="money-content">

          <div class="money-list" v-for="item in productList">
            <router-link :to="{name:'Financing',query:{product:item}}">
            <div class="moneyList-title">
              <span  v-for="it in item.remark" :key="index" class="tag" style="margin-right: 10px;">
                <span class="tag-content">{{it}}</span>
              </span>
            </div>
            <div>
              <div class="change">+{{item.dailyRatio}}%</div>
              <div class="change-content">
                <div class="change-day">{{item.productName}}</div>
                <div class="day">管理期限{{item.lockPeriod}}天</div>
              </div>
            </div>
            </router-link>
          </div>
          <!-- <div class="money-list">
            <div class="moneyList-title">
              <span class="tag" style="margin-right: 10px;">
                <span class="tag-content">定期</span>
              </span>
              <span class="tag">
                <span class="tag-content">保本保息</span>
              </span>
            </div>
            <div>
              <div class="change">+7.90%</div>
              <div class="change-content">
                <div class="change-day">ETH稳盈收益90天 2019090301</div>
                <div class="day">管理期限90天</div>
              </div>
            </div>
          </div> -->
         <!-- <div class="money-list">
            <div class="moneyList-title">
              <span class="tag" style="margin-right: 10px;">
                <span class="tag-content">定期</span>
              </span>
              <span class="tag">
                <span class="tag-content">保本</span>
              </span>
            </div>
            <div>
              <div class="change">+4.07%</div>
              <div class="change-content">
                <div class="change-day">USDT活期理财</div>
                <div class="day">随存随取 风险极低 实时到账</div>
              </div>
            </div>
          </div> -->
        </div>
      </div>

      <div class="swipe">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <van-swipe-item>
             <img src="../../assets/home/home-banner.png" width="100%" alt="" />
            </van-swipe-item>
            <!-- <img v-lazy="image" /> -->
          </van-swipe-item>
        </van-swipe>

      </div>
<!--
      <div class="discuss">
        <div class="discuss-list">
          <div class="discussList-content">
            <div>【每日热点】 #GXChain如何发起链上交易? #</div>
            <div style="margin-top: 10px;">
              <span style="margin-right: 10px;">
                <img src="../../assets/home/pinglun.png" alt />
                <span>7</span>
              </span>
              <span>
                <img src="../../assets/home/dianzan.png" alt />
                <span>190</span>
              </span>
            </div>
          </div>
          <div>
            <img src="../../assets/home/bg@3x.png" alt />
          </div>
        </div>
        <div class="discuss-list">
          <div class="discussList-content">
            <div>【每日热点】 #GXChain如何发起链上交易? #</div>
            <div style="margin-top: 10px;">
              <span style="margin-right: 10px;">
                <img src="../../assets/home/pinglun.png" alt />
                <span>7</span>
              </span>
              <span>
                <img src="../../assets/home/dianzan.png" alt />
                <span>190</span>
              </span>
            </div>
          </div>
          <div>
            <img src="../../assets/home/bg@3x.png" alt />
          </div>
        </div>
      </div> -->

     <!-- <div class="comm">
        <div class="comm-num">
          <span class="num">174569</span>&nbsp;正在社区讨论
        </div>
        <div>
          <van-button type="info">去社区</van-button>
        </div>
      </div> -->

 <!--     <div class="menus">
        <div class="menus-list">
          <div class="menus-num">
            <div>xxxx数据</div>
            <div>2379028居民</div>
          </div>
          <div>
            <img src="../../assets/home/gerenzhongxin.png" alt />
          </div>
        </div>
        <div class="menus-list">
          <div class="menus-num">
            <div>xxxx数据</div>
            <div>xxxx的解决方案</div>
          </div>
          <div>
            <img src="../../assets/home/city_icon.png" alt />
          </div>
        </div>
      </div> -->
    </div>
  </main-layout>
</template>


<script>
import MainLayout from "../../components/MainLayout";
import ProductService from '../../service/product';

export default {
  name: "Login",
  components: {
    //someComponent
    MainLayout
  },
  props: {},
  data() {
    return {
      msg: "Hello Vue.js",
      images: [
        // "../../assets/home/home-banner.png",
        "https://img.yzcdn.cn/vant/apple-2.jpg"
      ],
      productfilter:{
        pageSize:10,
        pageNum:1
      },
      communityfilter:{
        pageSize:4,
        pageNum:1
      },
      productList:[],
      userInfo: JSON.parse(this.$cookie.get('user'))
    };
  },
  computed: {},
  watch: {},
  mounted: function() {
    this.getProductList()
    this.getCommunityList()
  },
  methods: {
    login() {
      // this.$router.push({ name:"Login" });
      // this.$router.push({ name:"ResetPayPwd" });
      // this.$router.push({ name:"ProductInfo" });
    
      // this.$router.push({ name:"PayCenter" });
      this.$router.push({ name:"PayOnline" });
    },

    toUrl(val){
      this.$router.push({ name:val });
    },

    getProductList(){

      ProductService.productList(this.productfilter).then(res=>{
          console.log(res)

        if(res.status == 200){
          this.handleNumber(res.resultData.list)
          // res.resultData.list.forEach((item)=>{
          //    this.handleNumber(item)
          // })

        }
      })
    },
    getCommunityList () {

      ProductService.communityList(this.communityfilter).then(res=>{
          console.log(11222)

        if(res.status == 200){
          // res.resultData.list.forEach((item)=>{
          //    this.handleNumber(item)
          // })

        }
      })
    },
    handleNumber(list) {
      let obj = list[0]
      console.log(obj);
      let arr = obj.remark.split(" ");
      obj.dailyRatio  = '0.1%-' + Math.ceil(obj.dailyRatio*10)/10
      obj.remark = arr

      this.productList.push(obj)
    }
  }
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  overflow-y: scroll;
  padding-bottom: 60px;
  background-color: #fff;
}


.user-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}


.title {
  width: 100%;
  height: 450px;
  background: url("../../assets/home/20@2x.png") no-repeat;
  /* background: url("../../assets/home/20-2.png") no-repeat; */
  background-position: center;
  background-size: cover;
  padding-top: 15px;
  position: relative;
}

.search {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px;
}
.search-input {
  height: 32px;
  display: flex;
  align-items: center;
  background-color: #454383;
  border-radius: 3px;
  padding-left: 10px;
}
input {
  width: 80%;
  height: 32px;
  background-color: transparent;
  border: none;
}
#flag1 {
  position: absolute;
  left: 20%;
  top: 15%;
  color: #fff;
}
.flag1 {
  width: 72px;
  height: 76px;
  background: url("../../assets/home/jinbi_click.png") no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}
#flag2 {
  position: absolute;
  right: 20%;
  top: 25%;
  color: #fff;
}
.flag2 {
  width: 72px;
  height: 76px;
  background: url("../../assets/home/jinbi_click.png") no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}
#flag3 {
  position: absolute;
  left: 25%;
  top: 45%;
  color: #fff;
}
.flag3 {
  width: 72px;
  height: 76px;
  background: url("../../assets/home/jinbi_no_click.png") no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #383737;
}
#flag4 {
  position: absolute;
  right: 10%;
  top: 50%;
  color: #fff;
}
.flag4 {
  width: 72px;
  height: 76px;
  background: url("../../assets/home/jinbi_no_click.png") no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #383737;
}
#flag5 {
  position: absolute;
  right: 25%;
  bottom: 6%;
  color: #fff;
}
.flag5 {
  width: 63px;
  height: 63px;
  background: url("../../assets/home/kaixindoubao_icon@2x.png") no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #383737;
}
.flag5 + div {
  margin-top: -10px;
}
#flag6 {
  position: absolute;
  right: 5%;
  bottom: 6%;
  color: #fff;
}
.flag6 {
  width: 63px;
  height: 63px;
  background: url("../../assets/home/kaixindoubao_icon@2x.png") no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #383737;
}
.flag6 + div {
  margin-top: -10px;
}

.money {
  padding: 20px 20px 0 20px;
}

h4 {
  text-align: left;
}

.money-content {
  border-radius: 3px;
  box-shadow: 0px 0px 2px 2px #efefef;
  padding: 10px;
  background-color: #fff;
}

.money-list {
  padding: 10px 0;
  border-bottom: 1px solid rgba(153, 153, 153, 0.1);
}

.moneyList-title {
  width: 100%;
  text-align: left;
  padding-left: 10px;
}

.moneyList-title + div {
  display: flex;
  align-items: center;
}

.change {
  color: #ff3a31;
  font-size: 28px;
  border-right: 1px solid rgba(153, 153, 153, 0.1);
  padding-right: 10px;
}

.change-content {
  padding-left: 20px;
}

.change-day {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.day {
  color: #9d9d9d;
}

.tag {
  display: inline-block;
  color: #8589ee;
  font-weight: bold;
  background-color: #e0e8fe;
  transform: skew(-30deg);
  padding: 5px 3px;
}

.tag-content {
  display: inline-block;
  transform: skew(30deg);
}

.swipe {
  margin-top: 10px;
}

.van-swipe-item {
  height: 150px;
}

.discuss {
  padding: 0 10px 0 10px;
}

.discuss-list {
  padding: 20px;
  border-bottom: 2px solid rgba(153, 153, 153, 0.1);
  display: flex;
  align-items: center;
}

.discussList-content {
  text-align: left;
}

.comm {
  padding: 20px 0;
  text-align: center;
}

.comm-num {
  margin-bottom: 20px;
}

.num {
  color: red;
}

button {
  border-radius: 20px;
  padding: 0 30px;
}

.menus {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menus-list {
  background-color: #edf8ff;
  color: #98a6c8;
  padding: 10px 5px;
  display: flex;
  align-items: center;
}

/* div.menus-list{
  margin-right: 20px;
} */
.menus-num{
  text-align: left;
  line-height: 2;
}
</style>
